<template>
  <div class="page">
    <nav-bar :title="title"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-form validate-trigger="onSubmit" :show-error="false" :label-width="120" @submit="onSubmit">
        <van-field required :label="label" readonly :border="false" />
        <van-field
          v-model="formParams.reason"
          rows="5"
          autosize
          type="textarea"
          maxlength="200"
          show-word-limit
          class="van-field__value--textarea"
          :placeholder="`请输入${label}……`"
          :border="false"
          :rules="rules.reason"
        />
        <van-field label="添加图片/视频" readonly :border="false" input-align="right">
          <template #input>
            <van-radio-group v-model="accept" direction="horizontal">
              <van-radio name="image/*">图片</van-radio>
              <van-radio name="video/*">视频</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field class="van-field__value--upload" :border="false">
          <template #input>
            <van-uploader
              name="fileList"
              v-model="fileList"
              max-count="9"
              :accept="accept"
              :max-size="maxSize"
              :preview-image="previewImage"
              :before-read="uploadBeforeRead"
              :after-read="uploadAfterRead"
              @click-preview="previewClick"
            >
              <template #preview-cover="file">
                <div v-if="format.includes(file.file.name.split('.')[file.file.name.split('.').length - 1])">
                  <div class="van-uploader__preview-masker"></div>
                  <video-player
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    :options="{
                      aspectRatio: '16:16',
                      sources: [
                        {
                          src: $config.ImageURl + file.file.url
                        }
                      ]
                    }"
                  ></video-player>
                </div>
              </template>
              <div class="van-uploader__input--white">
                <div class="van-uploader__input--content">
                  <div class="upload-image">
                    <img src="@/assets/images/basic/icon_camera@2x.png" />
                  </div>
                  <div class="upload-text">点击拍摄</div>
                </div>
              </div>
            </van-uploader>
          </template>
        </van-field>
        <div style="margin: 60px 16px">
          <van-button block type="info" native-type="submit" :disabled="buttonDisabled">提交</van-button>
        </div>
      </van-form>
    </div>
    <!-- 视频预览 -->
    <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Upload from '@/mixins/upload'
import Event from '@/api/event'
export default {
  mixins: [Upload],
  data() {
    return {
      title: '',
      label: '',

      folder: 'event',
      accept: 'image/*',
      maxSize: 50 * 1024 * 1024,
      format: ['mp4', 'avi', 'mov'],
      videoPopupShow: false,
      videoUrl: '',
      fileList: [],
      eventData: {},
      formParams: {
        eventCode: '',
        nextPerson: '',
        eventOrigin: '',
        acceptance: this.$route.query.type,
        comment: '',

        reason: ''
      },
      rules: {
        reason: [{ required: true, message: `请输入${this.label}` }]
      },
      buttonDisabled: false
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    this.getDetail()
    this.init()
  },
  methods: {
    getDetail() {
      Event.Manage.detail({
        eventCode: this.$route.query.eventCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.eventData = { ...data }
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    init() {
      // 1：处置完成并上报  3：退回
      if (this.$route.query.type === '8') {
        this.title = '处置'
        this.label = '处置结果'
      } else if (this.$route.query.type === '3') {
        this.title = '退回'
        this.label = '退回原因'
      }
      this.rules.reason[0].message = `请输入${this.label}`
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.$config.ImageURl + this.fileList[detail.index].url
      }
    },
    onSubmit() {
      // if (this.formParams.acceptance === '3') {
      //   this.formParams.nextPerson = this.user.regionCode
      // } else {
      //   this.formParams.nextPerson = ''
      // }
      // this.formParams.nextPerson = this.user.regionCode
      this.formParams.assignee = this.user.gridPersonCode
      this.formParams.eventCode = this.eventData.eventCode
      this.formParams.eventOrigin = this.eventData.eventOrigin
      this.formParams.comment = this.formParams.reason
      if (this.fileList.length) {
        const urlArr = this.fileList.map(o => o.url)
        const urlStr = urlArr.join('&&&')
        this.formParams.comment += '###' + urlStr
      }
      this.buttonDisabled = true
      Event.Manage.updateStatus(this.formParams)
        .then(res => {
          this.buttonDisabled = false
          const { status } = res.data
          if (status === 0) {
            this.$router.push(`/page/message?backTo=-3&title=事件任务已${this.title}`)
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.buttonDisabled = false
        })
    }
  }
}
</script>
